<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>基础知识</title>
	<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link href="../css/polygon.css" rel="stylesheet">
	<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/3.2.3/animate.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="./css/border.css"/>
	<link rel="stylesheet" type="text/css" href="../../static/css/public.css" />
</head>
<body>
	<!-- 回到顶部 -->
	<div class="topBtn">
		<a href="#top">
			<i class="fa fa-long-arrow-up"></i>
		</a>
	</div>
	<!--右边内容-->
	<div id="app" class="main">
		<div class="shadow">
			<div class="Table">
				<div class="TableRow" v-for="(el,index) in list" v-cloak>
					<a class="RowLeft" :href="'#'+el.id">{{el.name}}</a>
					<span class="RowRight">{{el.explain}}</span>
				</div>
			</div>
			<div>
				<h4 id="filter">边框长度变化</h4>
				<pre>
	.move {
	    position: relative;
	    border: 1px solid #03A9F3;
	    height: 50px;
		width: 200px;
	}
	
	.move::before,
	.move::after {
		content: "";
		position: absolute;
		width: 20px;
		height: 20px;
	}
	
	.move::before {
		top: -5px;
		left: -5px;
		border-top: 1px solid #03A9F3;
		border-left: 1px solid #03A9F3;
	}
	
	.move::after {
		right: -5px;
		bottom: -5px;
		border-bottom: 1px solid #03A9F3;
		border-right: 1px solid #03A9F3;
	}
	
	.move:hover::before,
	.move:hover::after {
		width: calc(100% + 9px);
		height: calc(100% + 9px);
	}
	
		<div class="move"></div>
				</pre>
			</div>
			<div>
				<h4 id="triangle">虚线边框动画</h4>
				<pre>
	.mouse{
	    border: 1px solid #333;
	    height: 50px;
		width: 200px;
	}
	.mouse:hover {
		border: none;
		background: 
			linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
			linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
			linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
			linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
		background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
		background-position: 0 0, 0 100%, 0 0, 100% 0;
		animation: linearGradientMove .3s infinite linear;
	}
	
	@keyframes linearGradientMove {
	    100% {
	        background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
	    }
	}
		<div class="mouse"></div>
				</pre>
			</div>
			<div>
				<h4 id="polygon">渐变的其他妙用</h4>
				<pre>
	.rainbow {
		position: relative;
		z-index: 0;
		width: 400px;
		height: 300px;
		border-radius: 10px;
		overflow: hidden;
		padding: 2rem;
		
	}
	.rainbow::before {
		content: '';
		position: absolute;
		z-index: -2;
		left: -50%;
		top: -50%;
		width: 200%;
		height: 200%;
		background-color: #399953;
		background-repeat: no-repeat;
		background-size: 50% 50%, 50% 50%;
		background-position: 0 0, 100% 0, 100% 100%, 0 100%;
		background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);
		animation: rotate 4s linear infinite;
	}
	
	.rainbow::after {
		content: '';
		position: absolute;
		z-index: -1;
		left: 6px;
		top: 6px;
		width: calc(100% - 12px);
		height: calc(100% - 12px);
		background: white;
		border-radius: 5px;
		animation: opacityChange 3s infinite alternate;
	}
	@keyframes rotate {
		100% {
			transform: rotate(1turn);
		}
	}
	@keyframes opacityChange {
		50% {
			opacity:1;
		}
		100% {
			opacity: .5;
		}
	}
		<div class="rainbow"></div>
				</pre>
			</div>
			<div>
				<h4 id="parallelogram">clip-path 的妙用</h4>
				<pre>
	.clipPath {
		height: 50px;
		width: 200px;
		text-align: center;
		line-height: 50px;
	    position: relative;
	}
	.clipPath::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border: 2px solid gold;
		animation: clippath 3s infinite linear;
	}
	
	@keyframes clippath {
	    0%,
	    100% {
	        clip-path: inset(0 0 95% 0);
	    }
	    25% {
	        clip-path: inset(0 95% 0 0);
	    }
	    50% {
	        clip-path: inset(95% 0 0 0);
	    }
	    75% {
	        clip-path: inset(0 0 0 95%);
	    }
	}
	
		<div class="clipPath">hello</div>
				</pre>
			</div>
			<div>
				<h4 id="overflow">overflow 的妙用</h4>
				<pre>
	.over {
	    position: relative;
	    margin: auto;
	    width: 200px;
	    height: 100px;
	    line-height: 100px;
	    text-align: center;
	    overflow: hidden;
	}
	.over::after {
		content: "";
		position: absolute;
		top: 4px;
		bottom: 4px;
		right: 4px;
		left: 4px;
		line-height: 92px;
		font-size: 24px;
		background: #fff;
		border: 2px solid yellowgreen;
		cursor: pointer;
		color: yellowgreen;
	}
	
	.over::before {
		content: "";
		position: absolute;
		top: 0px;
		bottom: 0px;
		right: -20px;
		left: 0px;
		background: #fff;
		transform: rotateZ(-90deg) translate(-100%, -100%);
		transform-origin: top left;
		transition: transform .3s;
		transition-timing-function: linear;
	}
	
	.over:hover {
		filter: contrast(1.2);
	}
	
	.over:hover::before {
		transform: rotateZ(0deg) translate(0%, -0%);
	}
	
	.over:nth-child(2) {
	    overflow: unset;
	}
	.over::after {
		content: "";
	}
	
	.over:nth-child(1):hover ~ .over:nth-child(2)::before {
	    transform: rotateZ(0deg) translate(0%, -0%);
	}
	<div class="over">Hover Me</div>
	<div class="over">Hover Me</div>
				</pre>
			</div>
			<div>
				<h4 id="parallelogram">平行四边形</h4>
				<pre>
	.skulls {
	  position: relative;
	  width: 600px;
	  height: 200px;
	  margin: 0 auto;
	  border: 24px solid;
	  border-image: url(https://skullctf.com/images/skull-border.svg);
	  border-image-slice: 32;
	  border-image-repeat: round;//围绕
	}
		<div class="skulls"></div>
				</pre>
			</div>
		</div>
	</div>
	<!--页面加载进度条-->
	<script src="https://cdn.bootcdn.net/ajax/libs/pace/0.5.0/pace.min.js"></script>
	<!--定义数据-->
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.17/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var app = new Vue({
			el: "#app",
			data: function () {
				return {
					list:[
						{name:"边框长度变化",id:"filter",explain:''},
						{name:"虚线边框动画",id:"triangle",explain:''},
						{name:"渐变的其他妙用",id:"polygon",explain:''},
						{name:"clip-path 的妙用",id:"parallelogram",explain:''},
						{name:"overflow 的妙用",id:"overflow",explain:''},
						{name:"渐变的其他妙用",id:"polygon",explain:''},
					]
				}
			},
		})
	</script>
</body>

</html>